<script>
import {getArticleDetail, getArticleCommentList, AddUpvote, CancelUpvote, CheckUpVote, getAddCollection, getCancelCollection, getCheckCollection} from "@/api/homePage";

export default {
  name: "index",
  data(){
    return {
      detail: {},
      showLangBtn: false,
      currentLangIndex: 0,
      comments: [],
      dotShow: false, // 是否已点赞
      isCollected: false // 是否收藏
    }
  },
  onLoad(options) {
    console.log(options)
    if(options && options.id){
      this.getArticleData(options.id);
      // 检查点赞和收藏状态
      this.checkUpvoteStatus(options.id);
      this.checkCollectionStatus(options.id);
    }
  },
  methods: {
    getArticleData(id) {
      getArticleDetail({Id: id}).then(res =>{
        this.detail = res.Data
        console.log(JSON.parse(JSON.stringify(this.detail)))
        this.showLangBtn = Array.isArray(res.Data.OtherLanguageInfo) && res.Data.OtherLanguageInfo.length > 0;
        this.currentLangIndex = 0;
        uni.setNavigationBarTitle({
          title: this.detail.Title
        })
        // 文章详情加载后加载评论
        this.fetchComments(id);
      })
    },
    switchLanguage() {
      if (!this.showLangBtn) return;
      if (this.currentLangIndex === 0) {
        this.detail = this.detail.OtherLanguageInfo[0];
        this.currentLangIndex = 1;
        uni.setNavigationBarTitle({
          title: this.detail.Title
        })
      } else {
        getArticleDetail({Id: this.detail.ArticleId || this.detail.Id}).then(res =>{
          this.detail = res.Data;
          this.currentLangIndex = 0;
          uni.setNavigationBarTitle({
            title: res.Data.Title
          })
        })
      }
    },
    // 检查是否点赞
    checkUpvoteStatus(id) {
      CheckUpVote({ Id: id }).then(res => {
        this.dotShow = res.Data;
      });
    },
    // 检查收藏状态
    checkCollectionStatus(id) {
      getCheckCollection({
        CollectionType: 2,
        Id: id
      }).then((res)=>{
        this.isCollected = res.Data;
      })
    },
    // 获取评论列表
    fetchComments(id) {
      getArticleCommentList({
        ArticleId: id,
        Index: 1,
        Size: 10
      }).then(res => {
        // 假设返回的数据结构为 res.Data 为数组
        this.comments = Array.isArray(res.Data) ? res.Data : [];
      })
    },
    // 跳转到评论页面
    jumpComments(){
      uni.navigateTo({
        url: "/pages/article/comments?id=" + (this.detail.ArticleId || this.detail.Id)
      })
    },
    // 切换收藏状态
    async toggleCollect() {
      try {
        if (this.isCollected) {
          // 取消收藏
          const res = await getCancelCollection({
            CollectionType: 2, // 商家收藏类型
            Id: this.detail.ArticleId || this.detail.Id // 文章ID
          });
          this.isCollected = false;
          uni.showToast({
            title: '已取消收藏',
            icon: 'none',
            duration: 2000
          });
        } else {
          // 添加收藏
          const res = await getAddCollection({
            CollectionType: 2, // 商家收藏类型
            Id: this.detail.ArticleId || this.detail.Id // 文章ID
          });
          this.isCollected = true;
          uni.showToast({
            title: '收藏成功',
            icon: 'success',
            duration: 2000
          });
        }
      } catch (error) {
        console.error('操作收藏失败:', error);
        uni.showToast({
          title: '操作失败，请重试',
          icon: 'none',
          duration: 2000
        });
      }
    },
    // 点赞/取消点赞
    dot() {
      if (this.dotShow) {
        CancelUpvote({ Id: this.detail.ArticleId || this.detail.Id }).then(res => {
          console.log('取消点赞返回：', res);
          this.checkUpvoteStatus(this.detail.ArticleId || this.detail.Id);
        }).catch(err => {
          console.error('取消点赞出错:', err);
          uni.showToast({ title: '取消点赞出错', icon: 'none' });
        });
      } else {
        AddUpvote({ Id: this.detail.ArticleId || this.detail.Id }).then(res => {
          console.log('点赞返回：', res);
          this.checkUpvoteStatus(this.detail.ArticleId || this.detail.Id);
        }).catch(err => {
          console.error('点赞出错:', err);
          uni.showToast({ title: '点赞出错', icon: 'none' });
        });
      }
    }
  },
}
</script>

<template>
<view class="container">
  <!-- 文章标题和操作按钮 -->
  <view class="title-container">
    <view class="article-title">{{detail.Title}}</view>
  </view>
  
  
  
  <!-- 音频播放控件 -->
  <view v-if="(currentLangIndex === 0 && detail.ChineseVoice) || (currentLangIndex === 1 && detail.AudioFile)" class="audio-bar">
    <audio
      :src="currentLangIndex === 0 ? detail.ChineseVoice : detail.AudioFile"
      controls
      style="width: 100%;"
    />
  </view>
  
  <!-- 文章内容 -->
  <mp-html :content="detail.ChineseSubstance || detail.Substance" lazy-load images-update-mode="onLoad"/>
  

  
  <!-- 语言切换按钮 -->
  <view
    v-if="showLangBtn"
    class="lang-switch-btn"
    @click="switchLanguage"
  >
    {{ currentLangIndex === 0 ? $t('articleDetail.switchToEnglish') : $t('articleDetail.switchToChinese') }}
  </view>
</view>
</template>

<style scoped lang="scss">
.container{
  min-height: 100vh;
  padding: 20rpx;
  background-color: #F5F6F7;
}

.title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .article-title {
    flex: 1;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
	text-align: center;
  }
  
  .action-btns {
    display: flex;
    align-items: center;
    
    .action-btn {
      width: 70rpx;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20rpx;
      
      image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
}

.article-info {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
  align-items: center;
  .info-item {
    margin-right: 20rpx;
    &:last-child {
      margin-right: 0;
    }
    .value {
      color: #666;
      font-size: 24rpx;
    }
  }
}
.audio-bar {
  margin-bottom: 20rpx;
}
.lang-switch-btn {
  position: fixed;
  right: 40rpx;
  bottom: 60rpx;
  z-index: 999;
  background: #007aff;
  color: #fff;
  padding: 24rpx 40rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.12);
  text-align: center;
}

/* 评论区样式 */
.comment-section {
  padding: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  margin: 30rpx 0;

  .comment-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .comment-item {
    display: flex;
    margin-bottom: 30rpx;
    .avatar {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    .comment-content {
      flex: 1;
      .comment-header {
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;
        .nickname {
          font-weight: bold;
          margin-right: 16rpx;
        }
        .time {
          color: #999;
          font-size: 24rpx;
        }
      }
      .text {
        font-size: 28rpx;
        margin-bottom: 10rpx;
      }
    }
  }
  .comment-btn-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 10rpx;
    .write-comment-btn {
      background: linear-gradient(90deg, #3a7fe6, #5895e9);
      color: #fff;
      font-size: 28rpx;
      border-radius: 35rpx;
      padding: 0 40rpx;
      height: 60rpx;
      line-height: 60rpx;
      font-weight: bold;
      border: none;
    }
  }
}
</style>
